<template>
  <div class="divBoc">
    <!-- <div class="divClass">
      <span :class="{ spana: this.isCollapse, spana2: !this.isCollapse }" @click="spanClickHandler">
        <i class="el-icon-s-operation"></i>
      </span>
    </div> -->

    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" :unique-opened="true" :collapse="isCollapse"  :default-active="$route.path">
      <template v-for="item in this.menuData">
        <el-submenu v-if="item.menuList" :index="item.name">
          <template slot="title">
            <i :class=item.ico></i>
            <span slot="title" class="slotAp">{{ item.name }}</span>
          </template>
          <el-menu-item
            v-for="(itemList, i) in item.menuList"
            :index="itemList.path"
            :key="i"
            @click="$event=>clickHandler(itemList)"
          >
            {{ itemList.menuName }}
          </el-menu-item>
        </el-submenu>

        <!-- 有可能直接是一级菜单 -->
        <el-menu-item v-else :index="item.path" @click="$event=>clickHandler(item)">
          <i :class=item.ico></i>
          <span slot="title" class="slotAp">{{ item.name }}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
import { patchArray } from "@/router/patch";
export default {
  name: "asideLeft",
  data() {
    return {
      isCollapse: false,
      menuData: patchArray,
    };
  },
  methods: {
    clickHandler(menuItem){
      if(this.$route.path === menuItem.path) return
      let url = menuItem.path
      if(url !== ''){
        if(/^http(s)?:\/\//.test(url)){
          // window.open(url,'_blank')
          this.$router.push('/homePage')
          return
        }
        this.$router.push(url)
      }
    }
  },
};
</script>

<style scode lang="less">
.divBoc{
  height: 100%;
}
.divClass {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    display: inline-block;
    cursor: pointer;
    transition: all 0.1s ease-in;
    font-size: 18px;
    color: white;
  }
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 100%;
}

</style>
